<template>
  <div class="container">
    <div class="header" :class="{active: isActive}">
      <Header></Header>
    </div>
    <div class="body">
      <h1>开源&项目🍟</h1>
      <p>
        为开源尽一份力~</p>
    </div>
    <div class="body-container">
      <el-card class="cover">
        <div class="list">
          <el-skeleton :loading="loading" animated>
            <template #template>
              <div style="display: flex;flex-wrap: wrap;justify-content: space-between">
                <div>
                  <el-skeleton-item variant="image" style="width: 250px;height: 150px"></el-skeleton-item>
                  <el-skeleton-item variant="h3" style="margin: 20px 0 ;width: 50%" class="title"></el-skeleton-item>
                  <el-skeleton-item variant="h3" class="title"></el-skeleton-item>
                </div>
                <div>
                  <el-skeleton-item variant="image" style="width: 250px;height: 150px"></el-skeleton-item>
                  <el-skeleton-item variant="h3" style="margin: 20px 0 ;width: 50%" class="title"></el-skeleton-item>
                  <el-skeleton-item variant="h3" class="title"></el-skeleton-item>
                </div>
                <div>
                  <el-skeleton-item variant="image" style="width: 250px;height: 150px"></el-skeleton-item>
                  <el-skeleton-item variant="h3" style="margin: 20px 0 ;width: 50%" class="title"></el-skeleton-item>
                  <el-skeleton-item variant="h3" class="title"></el-skeleton-item>
                </div>
                <div>
                  <el-skeleton-item variant="image" style="width: 250px;height: 150px"></el-skeleton-item>
                  <el-skeleton-item variant="h3" style="margin: 20px 0 ;width: 50%" class="title"></el-skeleton-item>
                  <el-skeleton-item variant="h3" class="title"></el-skeleton-item>
                </div>
              </div>
            </template>
            <template #default>
              <div class="item" v-for="(item,index) in SourcesData" @click="goto(item.git_Url)">
                <div>
                  <img :src="item.img_Url" alt="">
                  <div class="cover-text">
                    <div class="cover-title">{{ item.name }}</div>
                    <div class="cover-desc">
                      <el-tag size="default" :color=randomColor(index) v-for="(item,index) in item.technology_Stack"
                              :key="index">
                        {{ item }}
                      </el-tag>
                    </div>
                    <div class="cover-description">
                      {{ item.description }}
                    </div>
                  </div>
                </div>
                <div class="item-cover">
                  <SvgIcon name="goto"></SvgIcon>
                </div>
              </div>
            </template>
          </el-skeleton>
        </div>
      </el-card>
      <Bottom></Bottom>
    </div>
  </div>
</template>
<script setup lang="ts">
import Header from "@/layout/index.vue"
import Bottom from "@/components/Bottom/index.vue";
import SvgIcon from "@/components/SvgIcon/SvgIcon.vue";
import {onMounted, ref, onUnmounted} from "vue";
import {GetAllOpenSource} from "@/api/source";

let loading = ref(true)
type data = {
  id: string
  name: string
  git_Url: string
  img_Url: string
  technology_Stack: Array<string>
  description: string
  create_time: string
  update_time: string
  status: number
}
let SourcesData = ref<data[]>([])


onMounted(async () => {
  window.addEventListener("scroll", handleScroll)
  let data = await GetAllOpenSource()
  SourcesData.value = data.data
  loading.value = false
})
const isActive = ref(false)
const handleScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  isActive.value = scrollTop > 733;
}
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
let randomColor = (index) => {
  let color = ["#bfffbf", "#80ff80", "#80ff80", "#8ccafc", "#fdfa66", "#1ac0c6"]
  return color[index]
}
let goto = (url: string) => {
  window.open(url)
}
</script>
<style scoped lang="scss">
.container {
  height: 60vh;
  position: relative;
  background: #fff;
  background-image: url("https://cdn.xuxiao888.com/back/colorhub.me_photos_4jOrV_4256x2832-zNlbLT34.jpeg");
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;

  .header {
    //粘性定位
    position: fixed;
    top: 0;
    z-index: 999;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    transition: all 0.3s;

  }

  .active {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 1px 3px 0 rgb(0 34 77 / 10%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .body {
    height: 93%;
    color: #fff;
    position: relative;
    z-index: 9;
    text-align: center;
    letter-spacing: 1.2px;
    //margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    h1 {
      font-size: 30px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    p {
      font-size: 16px;
      opacity: .8;
      margin-top: 5px;
    }
  }

  .body-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    min-height: 90vh;
    //background: radial-gradient(ellipse, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0) 700%);
    background-image: linear-gradient(90deg, rgba(60, 10, 30, .05) 3%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .05) 3%, transparent 0);
    background-size: 20px 20px;
    background-position: 50%;

    .cover {
      width: 70%;
      background-color: #ffffff;

      border-radius: 16px;
      margin-top: -70px;
      position: relative;
      color: rgba(60, 60, 67);;
      padding: 10px;
      z-index: 9;

      .list {

        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        //display: grid;
        //grid-template-rows: repeat(3, minmax(270px, 300px));
        //grid-template-columns: 1fr 1fr 1fr;


        .item {
          position: relative;
          margin: 10px 0;
          padding: 20px;
          width: 310px;
          //height: 270px;
          //
          box-shadow: 0px 2px 15px rgba(189, 186, 186, 0.3);
          border-radius: 20px;

          img {
            border-radius: 20px;
            width: 270px;
            height: 150px;
          }

          .cover-text {
            margin-top: 15px;

            .cover-title {
              font-size: 23px;
              font-weight: 700;
              color: #000;
              margin-bottom: 5px;
              line-height: 1.5;
              text-align: left;
              text-decoration: none;
              color: rgba(60, 60, 67);
              transition: all .3s;
            }

            .cover-desc {
              font-size: 16px;
              color: #de1111;
              line-height: 1.5;
              text-align: left;
              text-decoration: none;
              transition: all .3s;
              display: flex;
              justify-content: space-between;
            }

            .cover-description {
              margin-top: 20px;
              font-size: 14px;
              line-height: 22px;
              text-indent: 2rem;
              color: #cccccc;
            }
          }

          &:hover {
            transform: scale(1.05);
            //图片旋转
            //transform: rotate(10deg);
            .cover-text {
              .cover-title {
                color: #409eff;
              }

              .cover-desc {
                color: #08c28a;
              }
            }
          }

          &:hover {
            .item-cover {
              display: flex;
            }
          }

        }

        .item-cover {
          position: absolute;
          display: none;
          width: 100%;
          height: 70%;
          top: 3px;
          left: 0;
          background-color: rgba(178, 172, 172, 0.1);
          border-radius: 20px;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
      }


    }
  }
}

.container:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .4);
}
</style>